<template>
  <div>
    <h2>我的帖子</h2>
    <ul>
      <li v-for="item in data" :key="item.mid">
        <!-- 帖子内容 -->
        <img
              src="../../public/pic/头像.jpg"
              style="vertical-align: bottom;width: 60px;height: 60px;border-radius: 50%;"
            >
        <span>
          {{ item.phone.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3") }}
        </span>
        <span style="float: right; margin: 40px 20px 0 0">
          {{
            moment.unix(item.msg_time / 1000).format("YYYY年MM月DD HH:mm:ss")
          }}
        </span>
        <p @click="goRider">{{ item.msg }}</p>
        <div class="images">
          <div @click="goRider">
            <img :src="item.msg_pic1" alt="" />
          </div>
          <div @click="goRider">
            <img :src="item.msg_pic2" alt="" />
          </div>
          <div @click="goRider">
            <img :src="item.msg_pic3" alt="" />
          </div>
        </div>
        <div class="share">
          <el-button
            @click="copyLink(`http://139.224.11.75:8080${$route.path}`)"
          >
            <i class="el-icon-share"></i>分享
          </el-button>
          <el-button
            @click="
              comment = true;
              number(item.mid);
              getPageList2();
            "
          >
            <i class="el-icon-chat-dot-round"></i>评论
          </el-button>
          <el-button
            @click="
              number(item.mid, item.scount);
              like($event);
            "
            ><img
              style="width: 15px; height: 15px"
              src="../assets/an.png"
              alt=""
            />
            <span> {{ item.scount }}点赞 </span></el-button
          >
        </div>
      </li>
    </ul>
    <div class="block">
      <el-button-group
        style="position: relative; left: 85%; margin-top: 5px; bottom: 0"
      >
        <el-button
          type="info"
          size="mini"
          plain
          @click="getPageGo(-1)"
          :disabled="isActive"
          >上一页</el-button
        >
        <el-button
          type="info"
          size="mini"
          plain
          @click="getPageGo(1)"
          :disabled="xia"
          >下一页</el-button
        >
      </el-button-group>
    </div>
    <el-dialog title="大家都在评论..." :visible.sync="comment" width="40%">
      <div style="margin: 0 auto">
        <form action="">
          <el-input
            placeholder="请输入内容"
            v-model="form.remark_msg"
            clearable
          >
            <template slot="append">
              <el-button @click="send()">发送</el-button>
            </template>
          </el-input>
        </form>
      </div>
      <ul v-if="data2">
        <li style="background: #eee" v-for="item of data2" :key="item.pid">
          <img
              src="../../public/pic/头像.jpg"
              
              style="vertical-align: bottom;width: 50px;height: 50px;border-radius: 50%;"
            >
          <span style="margin-left: 5px">{{
            item.remark_phone.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3")
          }}</span>
          <span style="display: block; float: right; margin: 35px 10px 0 0">{{
            moment.unix(item.remark_time / 1000).format("YYYY年MM月DD HH:mm:ss")
          }}</span>
          <p style="padding: 20px 15px">{{ item.remark_msg }}</p>
        </li>
      </ul>
      <div class="block">
        <el-button-group>
          <el-button
            type="info"
            size="mini"
            plain
            @click="getPageGo2(-1)"
            :disabled="isActive2"
            >上一页</el-button
          >
          <el-button
            type="info"
            size="mini"
            plain
            @click="getPageGo2(1)"
            :disabled="xia2"
            >下一页</el-button
          >
        </el-button-group>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      xia: false,
      xia2: false,
      page: 1,
      data: null,
      phone: "",
      comment: false,
      form: {
        remark_msg: "",
        mid: "",
        remark_phone: "",
        remark_time: Date.now(),
      },
      form2: {
        mid: "",
        scount: "",
      },
      data2: "",
      page2: 1,
    };
  },
  watch:{
    comment(to,from){
      this.page2=1
      this.xia2=false
      console.log(this.page2)
    }
  },
  mounted() {
    this.save();
    this.getPageList();
  },
  inject: ["reload"],
  methods: {
    copyLink(val) {
      // 复制链接
      let url = val; // 后台接口返回的链接地址
      let inputNode = document.createElement("input"); // 创建input
      inputNode.value = url; // 赋值给 input 值
      document.body.appendChild(inputNode); // 插入进去
      inputNode.select(); // 选择对象
      document.execCommand("Copy"); // 原生调用执行浏览器复制命令
      inputNode.className = "oInput";
      inputNode.style.display = "none"; // 隐藏
      this.$message({
        message: "复制成功",
        type: "success",
        offset: "500",
        duration: 2000,
        center: true,
      });
    },
    save() {
      this.phone = sessionStorage.getItem("phone");
      this.form.remark_phone = sessionStorage.getItem("phone");
    },
    number(a, b) {
      this.form.mid = a;
      this.form2.mid = a;
      this.form2.scount = b;
    },
    send() {
      this.axios.post("/remark", qs.stringify(this.form)).then(async (res) => {
        await this.axios
          .get(`/getremark?mid=${this.form.mid}&page=1`)
          .then((res) => {
            this.data2 = res.data.data;
            this.form.remark_msg = "";
          });
      });
    },
    goRider() {
      this.$router.push("/rider");
    },
    //根据请求数据与后台交互
    getPageList() {
      this.axios
        .get(`/record?phone=${this.phone}&page=${this.page}`)
        .then((res) => {
          if (!res.data.data || res.data.data.length < 2) {
            this.xia = true;
          }
          this.data = res.data.data;
          this.code = res.data;
        });
    },
    //点击上一页和下一页
    getPageGo(index) {
      this.page = this.page + index;
      this.getPageList();
    },

    // 评论获取
    getPageList2() {
      this.axios
        .get(`/getremark?mid=${this.form.mid}&page=${this.page2}`)
        .then((res) => {
          if (res.data.data.length < 4) {
            this.xia2 = true;
          }
          this.data2 = res.data.data;
        });
    },
    //点击上一页和下一页
    getPageGo2(index) {
      this.page2 = this.page2 + index;
      this.getPageList2();
    },
    // 点赞
    like(e) {
      this.axios
        .post("/support", qs.stringify(this.form2))
        .then(async (res) => {
          await this.axios
            .get(`/getsupport?mid=${this.form2.mid}`)
            .then((res) => {
              e.target.innerHTML = " " + res.data.data[0].scount + "点赞";
            });
        });
    },
  },
  computed: {
    //当页码数到第一页时，上一页按钮禁用
    isActive() {
      if (this.page > 1) {
        return false;
      } else {
        return true;
      }
    },
    isActive2() {
      if (this.page2 > 1) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  text-align: left;
}
ul {
  list-style: none;
  li {
    background-color: white;
    margin-top: 10px;
    border-radius: 5px;
    padding: 10px;
    text-align: left;
    cursor: pointer;
    p {
      padding: 10px 40px;
    }
    .images {
      width: 100%;
      display: flex;
      margin: 0 auto;
      div {
        width: calc(100% / 3);
        text-align: center;
        display: flex;
        align-items: center;
        img {
          width: 60%;
          margin: 0 auto;
        }
      }
    }
  }
}
.share {
  display: flex;
  justify-content: space-evenly;
  .el-button {
    border: 0;
  }
}
</style>
